<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title> 斗鱼视频-热门主播海量视频、原创内容抢先看 </title>
		<link rel="icon" href="../index/image/logo_title.png">
		<link rel="stylesheet" type="text/css" href="css/header1.css"/>
		<script src="js/iconfont.js" type="text/javascript" charset="utf-8"></script>
		<script src="jquery-3.6.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div class="header">
			<div class="logo">
				<div class="lo_logo"><img src="img/dou.png"></div>
				<div class="lo_text">
					<ul>
						<li class="loli">
							<svg class="icon" aria-hidden="true">
								<use xlink:href="#icon-huojian"></use>
							</svg>
							直播
						</li>
						<li>|</li>
						<li  class="loli"><a href="videoyu.html">首页</a></li>
						<li style="color: rgb(255,93,35);">排行</li>
					</ul>
				</div>
		
			</div>
			<div class="search">
				<input type="" name="" id="" value="" placeholder="可爱在秘书姐姐面前一文不值" />
				<svg class="icon icsea" aria-hidden="true">
					<use xlink:href="#icon-sousuo"></use>
				</svg>
			</div>
			<div class="info">
				<div class="hdimg">
					<img src="img/hdImg_200470d4a57ce89aace8bc141025eec61629358585252.jpg">
				</div>
				<div class="info_ul">
					<ul>
						<li>消息</li>
						<li>动态</li>
						<li>收藏</li>
						<li>历史</li>
						<li>创作中心</li>
					</ul>
				</div>
				<div class="uploading">
					<svg class="icon" aria-hidden="true" style="color: white;">
						<use xlink:href="#icon-shangchuan"></use>
					</svg>
					上传视频
				</div>
			</div>
		</div>
		<div class="center">
			<div class="centers">
				<ul>
					<li style="background-color: rgb(255,93,35);color: white;">全站</li>
					<li class="dan">单击热游</li>
					<li class="dan">手游休闲</li>
					<li class="dan">网游竞技</li>
					<li class="dan">影视</li>
					<li class="dan">搞笑</li>
					<li class="dan">美食</li>
					<li class="dan">时尚</li>
					<li class="dan">动物圈</li>
					<li class="dan">知识</li>
					<li class="dan">汽车</li>
					<li class="dan">舞蹈</li>
					<li class="dan">音乐</li>
					<li class="dan">生活</li>
					<li class="dan">娱乐</li>
					<li class="dan">动画</li>
					
				</ul>
				<span>
					更多
					<svg class="icon" aria-hidden="true">
					    <use xlink:href="#icon-xiangxia"></use>
					</svg>
					
				</span>
			</div>
			<div class="centerx">
				<svg class="icon" aria-hidden="true">
				    <use xlink:href="#icon-zhuyi"></use>
				</svg>
				
				<span>根据稿件内容质量、近期的数据综合展示，动态更新</span>
				<ul>
					<!-- <li>
						<div class="list1">1</div>
						<div class="list2">
							<div class="pic">
								<img src="img/pp1.jfif" >
							</div>
							<div class="pic2">
								<span>真人短句《勇者无鸡》正片：狐狸柯达掉入永劫，天空boss竟是寅子？</span>
							    <div>
							    	<span>
										<svg class="icon" aria-hidden="true">
										    <use xlink:href="#icon-shipinbofangyingpian"></use>
										</svg>
										22.8万
									</span>
									<span>
										<svg class="icon" aria-hidden="true">
										    <use xlink:href="#icon-xinxi"></use>
										</svg>
										89
									</span>
									<span>
										<svg class="icon" aria-hidden="true">
										    <use xlink:href="#icon-UPzhu"></use>
										</svg>
										狐狸不太Sao
									</span>
							    </div>
							</div>
						</div>
						<div class="list3">
							<svg class="icon" aria-hidden="true">
							    <use xlink:href="#icon-redu1"></use>
							</svg>
							24153421
						</div>
					</li> -->
					
				</ul>
			</div>
		</div>
		<div class="footer">
			
			<div class="foli1">
				<p>关于我们 | 联系客服 | 招聘信息 | 友情链接 | 我要直播 | 意见反馈 | 版权保护投诉指引 | 斗鱼官方QQ号</p>
				<span>
					武汉斗鱼网络科技有限公司 版权所有 ©www.douyu.com 鄂ICP备15011961号-1 |
					鄂公网安备 42018502000107号 |
					工商网监 | 鄂网文[2015]1925-037 号
				</span>
				<span>2000107号 | 工商网监 | 鄂网文[2015]1925-037 号</span>
			</div>
		</div>
		<script type="text/javascript">
			// 头部鼠标移入效果
			$(".lo_text>ul>.loli").hover(function() {
			
				$(this).css("color", "rgb(204,75,28)");
				
			}, function() {
				$(this).css("color", " white");
				
			})
			$(".lo_text>ul>li>a").hover(function() {
			
				$(this).css("color", "rgb(204,75,28)");
			}, function() {
				$(this).css("color", " white");
			})
			$(".info_ul>ul>li").hover(function() {
				$(this).css("color", "rgb(255,93,35)");
			}, function() {
				$(this).css("color", " white");
			})
			$(".uploading").hover(function() {
				$(this).css("backgroundColor", "rgba(255,93,35,0.6)");
			}, function() {
				$(this).css("backgroundColor", "rgba(255,93,35)");
			})
			$(".centers>ul>.dan").hover(function(){
				$(this).css("backgroundColor", "rgb(255,93,35)");
				$(this).css("color","white");
			},function(){
				$(this).css("backgroundColor", "white");
				$(this).css("color","black");
			})
			
			// 固定头部
			// info_ul
			$(window).scroll(function() {
				if ($(window).scrollTop() > 900) {
					console.log(1);
					$(".header").css("position", "fixed");
					$(".header").css("backgroundImage","none");
			        $(".header").css("height","60px");
					$(".header").css("backgroundColor","white");
					$(".lo_text>ul>li").css("color","grey").siblings().eq(3).css("color","rgb(204,75,28)");
					$(".info_ul>ul>li").css("color","grey");
					$(".lo_text>ul>li>a").css("color","grey");
				    $(".header").css("boxShadow","3px 3px 3px grey");
					$(".lo_text>ul>.loli").hover(function() {
					
						$(this).css("color", "rgb(204,75,28)");
						
					}, function() {
						$(this).css("color", " grey");
						
					})
					$(".lo_text>ul>li>a").hover(function() {
					
						$(this).css("color", "rgb(204,75,28)");
					}, function() {
						$(this).css("color", " grey");
					})
					$(".info_ul>ul>li").hover(function() {
						$(this).css("color", "rgb(255,93,35)");
					}, function() {
						$(this).css("color", " grey");
					})
				} else {
					$(".header").css("position", "relative");
				}
			})
			$(function() {
				$.ajax({
					//请求方式  
					type: "GET",
					//文件位置  
					url: "sort.json",
					//返回数据格式为json,也可以是其他格式如  
					async: false,
					dataType: "json",
					//请求成功后要执行的函数，拼接html  
					success: function(data) {
						var str = "<ul>";
						$.each(data, function(i, n) {
							str +='<li><div class="list1">'+n.n+'</div><div class="list2"><div class="pic"><img src="'+n.src+'" ></div><div class="pic2"><span>'+n.t1+'</span><div><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-shipinbofangyingpian"></use></svg>'+n.t2+'</span><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-xinxi"></use></svg>'+n.t3+'</span><span><svg class="icon" aria-hidden="true"><use xlink:href="#icon-UPzhu"></use></svg>'+n.t4+'</span> </div></div>	</div><div class="list3"><svg class="icon" aria-hidden="true"><use xlink:href="#icon-redu1"></use></svg>'+n.num+'</div></li>'
						});
						str += "</ul>";
						$(".centerx").append(str);
						$(".pic2>span").hover(function(){
							$(this).css("color","rgb(255,93,35)");
						},function(){
							$(this).css("color","black");
						})
						$(".centerx>ul>li").hover(function(){
							$(this).css("border","1px solid grey ");
							$(this).css("boxShadow","3px 3px 3px grey");
						},function(){
							$(this).css("border","none");
							$(this).css("boxShadow","none");
						})
			
					},
				});
			});
		</script>
	</body>
</html>
